package wang.xinqiu.mysqlcontrol.ui
import android.util.Log
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import androidx.lifecycle.lifecycleScope
import kotlinx.coroutines.launch
import wang.xinqiu.mysqlcontrol.data.ConnectionInfo
import wang.xinqiu.mysqlcontrol.data.MySQLManager
import wang.xinqiu.mysqlcontrol.data.PreferencesManager
import androidx.compose.ui.res.painterResource
import wang.xinqiu.mysqlcontrol.R
import androidx.compose.ui.graphics.Color

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LoginScreen(
    modifier: Modifier = Modifier,
    mysqlManager: MySQLManager,  // 接收共享的实例
    onConnect: (ConnectionInfo) -> Unit
) {
    val context = LocalContext.current
    val preferencesManager = remember { PreferencesManager(context) }
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    
    var hostname by remember { mutableStateOf("") }
    var host by remember { mutableStateOf("") }
    var port by remember { mutableStateOf("3306") }
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var passwordVisible by remember { mutableStateOf(false) }
    var isConnecting by remember { mutableStateOf(false) }
    var isSaving by remember { mutableStateOf(false) }
    var errorMessage by remember { mutableStateOf<String?>(null) }
    var connectionHistory by remember { mutableStateOf<List<ConnectionInfo>>(emptyList()) }
    var showAboutDialog by remember { mutableStateOf(false) }
    var showVersionDialog by remember { mutableStateOf(false) }
    var showErrorDialog by remember { mutableStateOf(false) }
    var showMenuDropdown by remember { mutableStateOf(false) }

    // 当有错误信息时显示弹窗
    LaunchedEffect(errorMessage) {
        if (errorMessage != null) {
            showErrorDialog = true
        }
    }

    // 加载连接历史
    LaunchedEffect(Unit) {
        connectionHistory = preferencesManager.getConnectionHistory()
    }

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(16.dp)
                ) {
                    Text(
                        text = "连接历史",
                        style = MaterialTheme.typography.headlineSmall,
                        modifier = Modifier.padding(bottom = 16.dp)
                    )
                    
                    if (connectionHistory.isEmpty()) {
                        Text(
                            text = "暂无连接历史",
                            color = MaterialTheme.colorScheme.onSurfaceVariant
                        )
                    } else {
                        LazyColumn(
                            verticalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            items(connectionHistory) { connectionInfo ->
                                ConnectionHistoryCard(
                                    connectionInfo = connectionInfo,
                                    onQuickConnect = { 
                                        scope.launch { drawerState.close() }
                                        isConnecting = true
                                        errorMessage = null

                                        (context as androidx.activity.ComponentActivity).lifecycleScope.launch {
                                            // 检查当前连接是否有效且是同一个连接
                                            val isSameConnection = mysqlManager.getCurrentConnectionInfo()?.let { current ->
                                                current.host == connectionInfo.host && 
                                                current.port == connectionInfo.port && 
                                                current.username == connectionInfo.username
                                            } ?: false
                                            
                                            val result = if (isSameConnection && mysqlManager.isConnectionValid()) {
                                                // 复用现有连接
                                                Result.success("使用现有连接")
                                            } else {
                                                // 建立新连接
                                                mysqlManager.connect(connectionInfo)
                                            }
                                            
                                            isConnecting = false

                                            if (result.isSuccess) {
                                                onConnect(connectionInfo)
                                            } else {
                                                errorMessage = "快速连接失败: ${result.exceptionOrNull()?.message}"
                                            }
                                        }
                                    },
                                    onLoadConnection = { 
                                        scope.launch { drawerState.close() }
                                        hostname = connectionInfo.hostname
                                        host = connectionInfo.host
                                        port = connectionInfo.port
                                        username = connectionInfo.username
                                        password = connectionInfo.password
                                    },
                                    onDelete = {
                                        val updatedHistory = connectionHistory.toMutableList()
                                        updatedHistory.remove(connectionInfo)
                                        connectionHistory = updatedHistory
                                        preferencesManager.saveConnectionHistory(updatedHistory)
                                    }
                                )
                            }
                        }
                    }
                }
            }
        }
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("MySQL 连接") },
                    navigationIcon = {
                        IconButton(onClick = { 
                            scope.launch { drawerState.open() }
                        }) {
                            Icon(Icons.Default.History, contentDescription = "连接历史")
                        }
                    },
                    actions = {
                        Box {
                            IconButton(onClick = { showMenuDropdown = true }) {
                                Icon(Icons.Default.MoreVert, contentDescription = "更多选项")
                            }
                            
                            DropdownMenu(
                                expanded = showMenuDropdown,
                                onDismissRequest = { showMenuDropdown = false }
                            ) {
                                DropdownMenuItem(
                                    text = { 
                                        Row(
                                            verticalAlignment = Alignment.CenterVertically,
                                            horizontalArrangement = Arrangement.spacedBy(8.dp)
                                        ) {
                                            Icon(
                                                Icons.Default.Info,
                                                contentDescription = null,
                                                modifier = Modifier.size(20.dp)
                                            )
                                            Text("版本信息")
                                        }
                                    },
                                    onClick = {
                                        showMenuDropdown = false
                                        showVersionDialog = true
                                    }
                                )
                                DropdownMenuItem(
                                    text = { 
                                        Row(
                                            verticalAlignment = Alignment.CenterVertically,
                                            horizontalArrangement = Arrangement.spacedBy(8.dp)
                                        ) {
                                            Icon(
                                                Icons.Default.Person,
                                                contentDescription = null,
                                                modifier = Modifier.size(20.dp)
                                            )
                                            Text("关于作者")
                                        }
                                    },
                                    onClick = {
                                        showMenuDropdown = false
                                        showAboutDialog = true
                                    }
                                )
                            }
                        }
                    }
                )
            }
        ) { paddingValues ->
            Box(
                modifier = modifier
                    .fillMaxSize()
                    .padding(paddingValues),
                contentAlignment = Alignment.Center
            ) {
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(24.dp),
                    elevation = CardDefaults.cardElevation(defaultElevation = 12.dp),
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.surface
                    )
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(32.dp),
                        verticalArrangement = Arrangement.spacedBy(20.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        // 标题和图标
                        Row(
                            horizontalArrangement = Arrangement.spacedBy(12.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_mysql),
                                contentDescription = null,
                                modifier = Modifier.size(48.dp),
                                tint = Color.Unspecified  // 保持原始颜色
                            )
                            Text(
                                text = "数据库连接",
                                style = MaterialTheme.typography.headlineMedium,
                                color = MaterialTheme.colorScheme.primary
                            )
                        }
                        
                        // 输入字段
                        OutlinedTextField(
                            value = hostname,
                            onValueChange = { hostname = it },
                            label = { Text("连接名称") },
                            modifier = Modifier.fillMaxWidth(),
                            leadingIcon = {
                                Icon(Icons.Default.Label, contentDescription = null)
                            },
                            enabled = !isConnecting && !isSaving
                        )
                        
                        OutlinedTextField(
                            value = host,
                            onValueChange = { host = it },
                            label = { Text("主机地址") },
                            modifier = Modifier.fillMaxWidth(),
                            leadingIcon = {
                                Icon(Icons.Default.Computer, contentDescription = null)
                            },
                            enabled = !isConnecting && !isSaving
                        )
                        
                        OutlinedTextField(
                            value = port,
                            onValueChange = { port = it },
                            label = { Text("端口") },
                            modifier = Modifier.fillMaxWidth(),
                            leadingIcon = {
                                Icon(Icons.Default.Settings, contentDescription = null)
                            },
                            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                            enabled = !isConnecting && !isSaving
                        )
                        
                        OutlinedTextField(
                            value = username,
                            onValueChange = { username = it },
                            label = { Text("用户名") },
                            modifier = Modifier.fillMaxWidth(),
                            leadingIcon = {
                                Icon(Icons.Default.Person, contentDescription = null)
                            },
                            enabled = !isConnecting && !isSaving
                        )
                        
                        OutlinedTextField(
                            value = password,
                            onValueChange = { password = it },
                            label = { Text("密码") },
                            modifier = Modifier.fillMaxWidth(),
                            leadingIcon = {
                                Icon(Icons.Default.Lock, contentDescription = null)
                            },
                            trailingIcon = {
                                IconButton(onClick = { passwordVisible = !passwordVisible }) {
                                    Icon(
                                        if (passwordVisible) Icons.Default.VisibilityOff else Icons.Default.Visibility,
                                        contentDescription = if (passwordVisible) "隐藏密码" else "显示密码"
                                    )
                                }
                            },
                            visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
                            enabled = !isConnecting && !isSaving
                        )
                        
                        // 按钮行
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.spacedBy(12.dp)
                        ) {
                            // 保存按钮
                            Button(
                                onClick = {
                                    if (host.isNotBlank() && username.isNotBlank()) {
                                        isSaving = true
                                        errorMessage = null
                                        
                                        val connectionInfo = ConnectionInfo(
                                            hostname = hostname.ifBlank { host },
                                            host = host,
                                            port = port,
                                            username = username,
                                            password = password
                                        )
                                        
                                        (context as androidx.activity.ComponentActivity).lifecycleScope.launch {
                                            val result = mysqlManager.testConnection(connectionInfo)
                                            isSaving = false
                                            
                                            if (result.isSuccess) {
                                                preferencesManager.saveConnectionInfo(connectionInfo)
                                                connectionHistory = preferencesManager.getConnectionHistory()
                                                errorMessage = null
                                            } else {
                                                errorMessage = "保存失败: ${result.exceptionOrNull()?.message}"
                                            }
                                        }
                                    }
                                },
                                modifier = Modifier.weight(1f),
                                enabled = !isConnecting && !isSaving && host.isNotBlank() && username.isNotBlank(),
                                colors = ButtonDefaults.buttonColors(
                                    containerColor = MaterialTheme.colorScheme.secondary
                                )
                            ) {
                                if (isSaving) {
                                    CircularProgressIndicator(
                                        modifier = Modifier.size(20.dp),
                                        color = MaterialTheme.colorScheme.onSecondary
                                    )
                                    Spacer(modifier = Modifier.width(8.dp))
                                }
                                Text(if (isSaving) "保存中..." else "保存")
                            }
                            
                            // 连接按钮
                            Button(
                                onClick = {
                                    if (host.isNotBlank() && username.isNotBlank()) {
                                        isConnecting = true
                                        errorMessage = null
            
                                        val connectionInfo = ConnectionInfo(
                                            hostname = hostname.ifBlank { host },
                                            host = host,
                                            port = port,
                                            username = username,
                                            password = password
                                        )
            
                                        (context as androidx.activity.ComponentActivity).lifecycleScope.launch {
                                            try {
                                                val result = mysqlManager.connect(connectionInfo)
                                                isConnecting = false
                                                
                                                if (result.isSuccess) {
                                                    preferencesManager.saveConnectionInfo(connectionInfo)
                                                    onConnect(connectionInfo)
                                                } else {
                                                    val error = result.exceptionOrNull()?.message ?: "未知错误"
                                                    errorMessage = "连接失败: $error"
                                                }
                                            } catch (e: Exception) {
                                                isConnecting = false
                                                errorMessage = "连接异常: ${e.message}"
                                            }
                                        }
                                    }
                                },
                                modifier = Modifier.weight(1f),
                                enabled = !isConnecting && !isSaving && host.isNotBlank() && username.isNotBlank()
                            ) {
                                if (isConnecting) {
                                    CircularProgressIndicator(
                                        modifier = Modifier.size(20.dp),
                                        color = MaterialTheme.colorScheme.onPrimary
                                    )
                                    Spacer(modifier = Modifier.width(8.dp))
                                }
                                Text(if (isConnecting) "连接中..." else "连接")
                            }
                        }
                    }
                }
            }
        }
    }
    
    // 版本信息弹窗
    if (showVersionDialog) {
        AlertDialog(
            onDismissRequest = { showVersionDialog = false },
            title = { 
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Icon(
                        Icons.Default.Info,
                        contentDescription = null,
                        tint = MaterialTheme.colorScheme.primary
                    )
                    Text("版本信息")
                }
            },
            text = {
                LazyColumn(
                    modifier = Modifier.heightIn(max = 400.dp),
                    verticalArrangement = Arrangement.spacedBy(16.dp)
                ) {
                    item {
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.Center
                        ) {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_mysql),
                                contentDescription = null,
                                modifier = Modifier.size(64.dp),
                                tint = Color.Unspecified
                            )
                        }
                    }
                    
                    item {
                        Text(
                            text = "MySQL Control",
                            style = MaterialTheme.typography.headlineSmall,
                            color = MaterialTheme.colorScheme.primary,
                            modifier = Modifier.fillMaxWidth(),
                            textAlign = androidx.compose.ui.text.style.TextAlign.Center
                        )
                    }
                    
                    item {
                        Divider()
                    }
                    
                    item {
                        Column(
                            verticalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            Row(
                                modifier = Modifier.fillMaxWidth(),
                                horizontalArrangement = Arrangement.SpaceBetween
                            ) {
                                Text(
                                    text = "版本号:",
                                    style = MaterialTheme.typography.bodyMedium,
                                    fontWeight = androidx.compose.ui.text.font.FontWeight.Medium
                                )
                                Text(
                                    text = "1.1.0",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                modifier = Modifier.fillMaxWidth(),
                                horizontalArrangement = Arrangement.SpaceBetween
                            ) {
                                Text(
                                    text = "构建日期:",
                                    style = MaterialTheme.typography.bodyMedium,
                                    fontWeight = androidx.compose.ui.text.font.FontWeight.Medium
                                )
                                Text(
                                    text = "2025年08月12日",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                modifier = Modifier.fillMaxWidth(),
                                horizontalArrangement = Arrangement.SpaceBetween
                            ) {
                                Text(
                                    text = "目标SDK:",
                                    style = MaterialTheme.typography.bodyMedium,
                                    fontWeight = androidx.compose.ui.text.font.FontWeight.Medium
                                )
                                Text(
                                    text = "API 35",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                modifier = Modifier.fillMaxWidth(),
                                horizontalArrangement = Arrangement.SpaceBetween
                            ) {
                                Text(
                                    text = "最低SDK:",
                                    style = MaterialTheme.typography.bodyMedium,
                                    fontWeight = androidx.compose.ui.text.font.FontWeight.Medium
                                )
                                Text(
                                    text = "API 26",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                        }
                    }
                    
                    item {
                        Divider()
                    }
                    
                    item {
                        Text(
                            text = "功能特性",
                            style = MaterialTheme.typography.titleMedium,
                            color = MaterialTheme.colorScheme.primary,
                            fontWeight = androidx.compose.ui.text.font.FontWeight.Medium
                        )
                    }
                    
                    item {
                        Column(
                            verticalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "MySQL 数据库连接管理",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "连接历史记录与快速连接",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "数据库和表结构浏览",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "SQL 查询执行与结果展示",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "表数据查看与设计表",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "表结构设计与修改",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "SQL 语句模板与智能提示",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                            
                            Row(
                                verticalAlignment = Alignment.Top,
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Icon(
                                    Icons.Default.CheckCircle,
                                    contentDescription = null,
                                    modifier = Modifier.size(16.dp),
                                    tint = MaterialTheme.colorScheme.primary
                                )
                                Text(
                                    text = "安全的连接信息加密存储",
                                    style = MaterialTheme.typography.bodyMedium
                                )
                            }
                        }
                    }
                    
                    item {
                        Divider()
                    }
                    
                    item {
                        Text(
                            text = "一个功能完整、界面简洁的 MySQL 数据库管理工具，让数据库操作变得更加便捷高效。",
                            style = MaterialTheme.typography.bodySmall,
                            color = MaterialTheme.colorScheme.onSurfaceVariant,
                            modifier = Modifier.fillMaxWidth(),
                            textAlign = androidx.compose.ui.text.style.TextAlign.Center
                        )
                    }
                }
            },
            confirmButton = {
                TextButton(onClick = { showVersionDialog = false }) {
                    Text("关闭")
                }
            }
        )
    }
    
    // 错误信息弹窗
    if (showErrorDialog && errorMessage != null) {
        AlertDialog(
            onDismissRequest = { 
                showErrorDialog = false
                errorMessage = null
            },
            title = { 
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Icon(
                        Icons.Default.Error,
                        contentDescription = null,
                        tint = MaterialTheme.colorScheme.error
                    )
                    Text("错误信息")
                }
            },
            text = {
                LazyColumn(
                    modifier = Modifier.heightIn(max = 200.dp)
                ) {
                    item {
                        Text(
                            text = errorMessage!!,
                            style = MaterialTheme.typography.bodyMedium
                        )
                    }
                }
            },
            confirmButton = {
                TextButton(
                    onClick = { 
                        showErrorDialog = false
                        errorMessage = null
                    }
                ) {
                    Text("关闭")
                }
            }
        )
    }
    
    // 关于作者弹窗
    if (showAboutDialog) {
        AlertDialog(
            onDismissRequest = { showAboutDialog = false },
            title = { 
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Icon(
                        Icons.Default.Person,
                        contentDescription = null,
                        tint = MaterialTheme.colorScheme.primary
                    )
                    Text("关于作者")
                }
            },
            text = {
                Column(
                    verticalArrangement = Arrangement.spacedBy(12.dp)
                ) {
                    Text(
                        text = "开发者信息",
                        style = MaterialTheme.typography.titleMedium,
                        color = MaterialTheme.colorScheme.primary
                    )
                    Text(
                        text = "作者: 念旧",
                        style = MaterialTheme.typography.bodyMedium
                    )
                    Text(
                        text = "邮箱: yunwei@xinqiu.wang",
                        style = MaterialTheme.typography.bodyMedium
                    )
                    Text(
                        text = "技术交流QQ群: 727588508",
                        style = MaterialTheme.typography.bodyMedium
                    )
                    
                    Divider()
                    
                    Text(
                        text = "感谢您的使用！如有问题或建议，欢迎联系作者。",
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                }
            },
            confirmButton = {
                TextButton(onClick = { showAboutDialog = false }) {
                    Text("关闭")
                }
            }
        )
    }
}

@Composable
fun ConnectionHistoryCard(
    connectionInfo: ConnectionInfo,
    onQuickConnect: () -> Unit,
    onLoadConnection: () -> Unit,
    onDelete: () -> Unit
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.Top
            ) {
                Column(modifier = Modifier.weight(1f)) {
                    Text(
                        text = connectionInfo.hostname,
                        style = MaterialTheme.typography.titleMedium,
                        color = MaterialTheme.colorScheme.primary
                    )
                    Text(
                        text = "${connectionInfo.host}:${connectionInfo.port}",
                        style = MaterialTheme.typography.bodyMedium,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                    Text(
                        text = "用户: ${connectionInfo.username}",
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                }
                
                IconButton(
                    onClick = onDelete,
                    modifier = Modifier.size(32.dp)
                ) {
                    Icon(
                        Icons.Default.Delete,
                        contentDescription = "删除连接",
                        tint = MaterialTheme.colorScheme.error,
                        modifier = Modifier.size(20.dp)
                    )
                }
            }
            
            Spacer(modifier = Modifier.height(12.dp))
            
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                OutlinedButton(
                    onClick = onLoadConnection,
                    modifier = Modifier.weight(1f)
                ) {
                    Text("加载")
                }
                Button(
                    onClick = onQuickConnect,
                    modifier = Modifier.weight(1f)
                ) {
                    Text("快速连接")
                }
            }
        }
    }
}
